<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/mobile-select@latest/dist/style/mobile-select.css" />
    <script type="text/javascript" src="https://unpkg.com/mobile-select@latest/dist/mobile-select.iife.min.js" ></script>
    <!-- <link rel="stylesheet" href="../mobile-calendar/dist/calendar.min.css"> -->
    <!-- <script src="../mobile-calendar/dist/calendar.min.js"></script> -->
</head>
<body>
    <div id="root">
      {{msg}}
      <hello ></hello>
    </div>
    <!-- <div class="item">
      <label for="cal">1221312</label>
        <input type="text" id="cal" Hours class="calendars" placeholder="选择日期时间" style="" />
    </div> -->
    <!-- <input type="date" name="" id=""> -->
    <script src="../vue/js/vue.js"></script>
    <script type="text/javascript">

    let formatDate = (date) => {
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
        console.log(year,'年',month,'月',day,'日')
      return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
    }

    // let afterSevenDays = new Date(now.setDate(now.getDate() + 1));
    let dateArr = []; // 存储日期集合
    for (let i = 1; i < 8; i++) {
      let now = new Date();
      let date = new Date(now.setDate(now.getDate() + i));
      dateArr.push(formatDate(date));
    }
    console.log(dateArr); 
      const hello = Vue.extend({
        template:`
          <div>
            <div ref="tirggerRef">
              <div class="your-classname">{{ selectedVal || "请选择" }}</div>
            </div>
          </div>
          `,
          data: () => ({
            msInstance: null,
            selectedVal: "",
          }),
          mounted() {
            this.msInstance = new MobileSelect({
              trigger: this.$refs.tirggerRef,
              wheels: [
              {
                data: [
                  { id: "1", value: "附近" },
                  { id: "2", value: "上城区" },
                  { id: "3", value: "下城区" },
                  { id: "4", value: "江干区" },
                  { id: "5", value: "拱墅区" },
                  { id: "6", value: "西湖区" },
                ],
              },
              {
                data: [
                  { id: "1", value: "1000米" },
                  { id: "2", value: "2000米" },
                  { id: "3", value: "3000米" },
                  { id: "4", value: "5000米" },
                  { id: "5", value: "10000米" },
                ],
              },
              ],
              triggerDisplayValue: false, // 如果不想覆盖trigger内的html 这里需要设置为false
              onChange: (data) => {
                console.log(data)
                console.log(data[0]["value"],data[1]["value"])
                let text = data[0]["value"]+' '+data[1]["value"]
                this.selectedVal = text
              },
            });
          },
          unmounted() {
            this.msInstance.destroy(); // 销毁组件实例
          },
      })
      //第二步：全局注册组件
		  Vue.component('hello',hello)
      //创建vm
      new Vue({
        el:'#root',
        data:{
          msg:'你好啊！'
        },
      })
    
    </script>
</body>
</html>